/**
useState 就是一个 Hook
通过在函数组件里调用它来给组件添加一些内部 state,
React 会在重复渲染时保留这个 state

useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。
它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并

useState 唯一的参数就是初始 state
返回一个 state，以及更新 state 的函数
+ 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同(和this.state不同,它可以是一个基本数据类型而不强制要求其为一个对象)
+ setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列(注意setState不会改变state,而是改变的一个中间变量x,参看示例 原理探究/01useState原理探究)

每一次渲染都是独立的闭包 都有它自己的 Props 、State 以及 事件处理函数
*/
import React, {useState} from 'react';

export default () => {
  const [count, setCount] = useState(0/*←这里也可以是一个函数,初始值为这个函数的返回值(return),这可以作为class组件constructor的替代*/);
  const [count1, setCount1] = useState(0);

  console.log('--- render ---'); /** 即使有多个状态变更 也只会执行一次(我们点击下面button,虽然改变了两个状态,但只会渲染一次函数)，但需要注意的是如果是在React.StrictMode下会渲染多次*/
  return (
    <div>
      <p>{count}</p>
      <p>{count1}</p>
      <button onClick={() => {
        setCount(x => x + 1); /** 函数式更新,获取到的值是最新的*/
        setCount1(count1 + 1); /** 并不一定是最新的,参看01函数式更新*/

        // setCount(0); // 如果设置的值和上次相等 那么就不会重新渲染, 不会打印 console.log('--- render ---') 的
        //setCount(10);  // 如果设置一个固定值 但和上次不相等 那么可以点两次 但在之后再点 就不会触发render了 // 16.12.0
      }}>+1</button>
    </div>
  )
};
